import React, { PureComponent, StrictMode } from "react"
import { CSSTransition, SwitchTransition } from "react-transition-group"
import "./style.css"

export default class CpnSwitchTransition extends PureComponent {
  constructor() {
    super()
    this.state = {
      isLogin: true
    }
  }

  render() {
    const { isLogin } = this.state
    return (
      <div>
        <SwitchTransition mode="out-in">
          {/* 必须要cssTransition*/}
          {/*原先写in是因为值是true/false布尔值切换，这里是exit字符串切换*/}
          <CSSTransition
            key={isLogin ? "exit" : "login"}
            classNames="login"
            timeout={1000}
          >
            <button onClick={(e) => this.setState({ isLogin: !isLogin })}>
              {isLogin ? "注销" : "登录"}
            </button>
          </CSSTransition>
        </SwitchTransition>
      </div>
    )
  }
}
